<template>
  <el-form
    ref="formRef"
    :model="form"
    label-width="120px"
    :rules="rules"
    class="form"
  >
    <!-- <el-col :span="24"> -->

    <el-form-item label="旧密码" prop="oldPassword">
      <el-input v-model="form.oldPassword"></el-input>
    </el-form-item>

    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="form.newPassword"></el-input>
    </el-form-item>

    <el-form-item label="昵称" prop="nickName">
      <el-input v-model="form.nickName"></el-input>
    </el-form-item>

    <!-- </el-col> -->
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import { updateUserInfoRules } from "@/config/validateConfig"
import { useStore } from "@/store"
import Validate from "@/hooks/validate"
import { ElForm } from "element-plus"

const store = useStore()
const form = reactive({
  oldPassword: "",
  newPassword: "",
  nickName: ""
})
const formRef = ref<InstanceType<typeof ElForm>>()
watch(form, async () => {
  const res = await Validate.formValidate(formRef.value!)
  if (res) {
    store.commit("moduleUser/updateUserInfo", form)
    store.commit("changeDialogConfirm", false)
  }
})
const rules = {
  ...updateUserInfoRules
}
</script>

<style lang="less" scoped>
.form {
  width: 70%;
  margin: 0 auto;
}
</style>
